<template>
	<view :style="{width: width}" class="goods-item bg-white" hover-class="none" @tap="goGoodsDetail(item)">
		<custom-image :extendType="item.lease_goods.is_pt==1?'zy_logo':null" :width="width" :height="width"
			radius="10rpx" lazy-load :src="item.image" />
		<view style="padding: 8rpx">
			<view class="goods-name line1">{{item.name}}</view>
			<view class="">
				<view class="yj-box tag">
					<deposit-tag v-if="item.lease_goods.is_pt!=3" :price="item.price"></deposit-tag>
					<view v-else class="line-through muted">
						￥{{item.market_price}}
					</view>
					<view class="" style="margin-left: 30rpx;"></view>
					<deposit1-tag :price="item.lease_goods.deposit_price" v-if="item.lease_goods.is_pt!=3"></deposit1-tag>
				</view>
				<view class="day-text">
					<price-format :price="item.lease_goods.is_pt==3?item.price:item.lease_goods.min_price"
						:first-size="36" :second-size="28" type="day"></price-format>
				</view>
			</view>
			<view class="row mt10 mb20" style="gap:20rpx" :class="width=='240rpx'?'xxs':''">
				<view v-if="item.lease_goods.is_pt!=3" @click.stop="goGoodsDetailForBtn(1,item)" class="user-btn"
					style="--color:#3fd57b">
					立即租赁
				</view>
				<view @click.stop="goGoodsDetailForBtn(2,item)" class="user-btn" style="--color:var(--primary-color)">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => {}
			},
			type: {
				type: String,
				default: ''
			},
			url: {
				type: String,
				default: ''
			},
			width: {
				type: String,
				default: '240rpx'
			},
		},
		data() {
			return {

			};
		},
		methods: {
			// 查看商品详情
			goGoodsDetail(item) {
				if (item.lease_goods.is_pt != 3) return uni.navigateTo({
					url: '/bundle/pages/lease_goods_details/lease_goods_details' + '?' + 'id=' + item
						.lease_goods.id
				});
				uni.navigateTo({
					url: '/package_goods/pages/goods_detail/index' + '?' + 'id=' + item.id
				})
			},
			goGoodsDetailForBtn(type, item) {
				let url = '/bundle/pages/lease_goods_details/lease_goods_details' + '?' + 'id=' + item.lease_goods.id
				if (type == 2)
					url = '/package_goods/pages/goods_detail/index' + '?' + 'id=' + item.id
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user-btn {
		--color: blue;
		line-height: 50rpx;
		border: 2rpx solid var(--color);
		border-radius: 50rpx;
		flex: 1;
		color: var(--color);
		box-sizing: border-box;
		text-align: center;
	}

	.goods-item {
		width: 240rpx;
		display: inline-block;
		border-radius: 10rpx;
		overflow: hidden;


		.tag {
			height: 38rpx;
			margin: 5rpx 0;
		}

		.yj-box {
			width: fit-content;
			border-radius: 4rpx;
			// border: 1rpx solid #FF2C3C;
			display: flex;
			align-items: center;

			.label {
				width: 38rpx;
				height: 36rpx;
				background-color: #FF2C3C;
				color: #fff;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.p {
				font-size: 24rpx;
				color: #FF2C3C;
				padding: 0 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.day-text {
			display: flex;
			align-items: flex-end;
			color: #FF2C3C;
			margin-top: 10rpx;

			.d {
				font-weight: 600;
				font-size: 36rpx;
				line-height: 38rpx;
			}
		}
	}
</style>